<script lang="ts" setup>
    interface Props {
        isImg: boolean,
        src?: string
        textVal?: string,
        title: string
    }
    const props = defineProps<Props>()
    const imgCircle = true
    const imgMargin = true
</script>

<template>
  <div>
    <van-cell-group>
        <van-cell :title="title" center is-link value="内容">
            <template #value>
                <img :src="src" v-if="isImg" :class="{imgCircle: imgCircle, imgMargin: imgMargin}" class="img" />
                <span class="custom-title1" v-else-if="!isImg && !textVal">未填写</span>
                <span class="custom-title2" v-else>{{ textVal }}</span>
            </template>
            <template #right-icon>
                <div>
                    <span class="iconfont icon-youjiantou"></span>
                </div>
            </template>
        </van-cell>
    </van-cell-group>
  </div>
</template>

<style scoped>
    .img {
        width: 48px;
        height:48px;
    }
    .imgCircle {
        border-radius: 50%;
    }
    .van-cell {
        padding-left: 17px;
    }
    .icon-youjiantou {
        width: 18px;
        height: 18px;
    }
    .imgMargin {
        margin-right: 16px;
    }
    .custom-title1 {
        padding-right: 16px;
        color: #ccc;
    }
    .custom-title2 {
        padding-right: 16px;
        color: #000;
    }
</style>